<template>
  <div class="index-layout">
    <van-nav-bar @click-left="$router.go(-1)" left-arrow title="安全设置"/>
    <div class="safe">
      <div class="userInfo">
        <img v-image-preview :src="userInfo.avatar" class="user-icon" alt='加载失败'/>

        <div class="userInfo-content">
          <p>昵称：{{ userInfo.name }}</p>
          <p>账号：{{ userInfo.account }}</p>
        </div>
        <div class="edit" @click="edit">编辑</div>
      </div>
      <van-cell-group>
        <van-cell is-link title="我的收货地址" to="/address/list"/>
      </van-cell-group>

      <van-cell-group class="resetArea">
        <van-cell is-link title="修改登录密码" to="/safe/resetPwd"/>
        <van-cell is-link title="修改支付密码" to="/safe/changePayPassword"/>
      </van-cell-group>

      <van-cell-group>
        <van-cell is-link title="问题反馈" to="/safe/feedback"/>
        <van-cell is-link title="关于我们" to="/about"/>
      </van-cell-group>
      <div class="footerBtn">
        <van-button type="primary" block @click="switchUser">切换用户</van-button>
        <van-button type="primary" block @click="loginOut">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SafeIndex",
  data() {
    return {
      userInfo: {}
    }
  },
  created() {
    this.getCurrentInfo();
  },
  mounted() {
    let height = document.documentElement.clientHeight || document.body.clientHeight;
    let htmlDom = document.getElementsByClassName("index-layout")[0];
    htmlDom.style.height = height + "px";
  },
  methods: {
    //切换用户
    switchUser() {
      this.$router.push("/login");
      localStorage.removeItem("eleToken");
    },
    // 退出登录
    loginOut() {
      this.$router.push("/login");
      localStorage.removeItem("eleToken");
      this.$store.dispatch("clearCurrentState");
    },
    // 点击编辑按钮
    edit() {
      this.$router.push({path: "/safe/updateUserInfo"})
    },

    //获取用户信息
    getCurrentInfo() {
      this.$axios.get(this.$api.current).then(res => {
        if (res.status === 200) {
          this.userInfo = res.data;
        }
      }).catch(error => console.log(error));
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #fafafa;
}

.index-layout {
  background-color: #fafafa;
}

.safe {
  .userInfo {
    background-color: #fff;
    padding: 20/16rem;
    display: flex;
    flex-direction: row;
    position: relative;

    .user-icon {
      width: 60/16rem;
      height: 60/16rem;
      border-radius: 50%;
      margin-right: 1rem;
    }


    .userInfo-content {
      height: 60/16rem;

      p {
        margin: 0;
        margin: 5px 0;
      }
    }

    .edit {
      padding: 3px 5px;
      color: orange;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10/16rem;
      border-radius: 7px;
      border: 1px solid orange;
    }
  }

  .resetArea {
    margin: 10px 0;
  }

  .footerBtn {
    margin-top: 10px;

    .van-button {
      margin-bottom: 10px;
      background-color: #fff;
      color: #333333;
      border: none;
    }
  }
}
</style>
